<template>
  <a-modal v-model:visible="visible" title="重置密码" :width="500">
    <a-form
      layout="Vertical"
      :model="formState"
      ref="formRef"
      :labelCol="{ style: { width: '120px' } }"
      :rules="rules"
    >
      <a-form-item label="" name="name" required>
        <a-input
          v-model:value="formState.name"
          placeholder="请输入用户名/账号"
        />
        <div class="mt-10">
          点击确认后，密码将进行重置，默认密码为abc123456
        </div>
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button type="primary" @click="save">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup>
import { postUserPwdReset } from "@/api/system";
import { message } from "ant-design-vue";
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
const formRef = ref(null);
const formState = reactive({
  name: "",
});
const visible = ref(false);
const rules = {
  name: [{ required: true, message: "请输入用户名/账号", trigger: "change" }],
};
const save = () => {
  formRef.value.validate().then(() => {
    postUserPwdReset({ ...formState }).then((res) => {
      message.success("操作成功");
      visible.value = false;
    });
  });
};
defineExpose({
  visible,
});
</script>

<style lang="less" scoped>
.list-box {
  display: flex;
  border: 1px solid #ececec;
  .list {
    width: 20%;
    &:not(:last-child) {
      border-right: 1px solid #ececec;
    }
  }
  .date,
  .count-list {
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-bottom: 1px solid #ececec;
  }
}
</style>
